<template>
  <div class="vip-benefits with-cover">
    <div class="head">
      <img src="~/assets/images/vip-benefits1.png" alt="" />
      会员权益
    </div>
    <div class="content">
      <div class="tab-head">
        <div
          class="tab"
          :class="activeIndex === 0 && 'tab-active'"
          @click="checkTab(0)"
        >
          会员管理
        </div>
        <div
          class="tab"
          :class="activeIndex === 1 && 'tab-active'"
          @click="checkTab(1)"
        >
          历史订单
        </div>
      </div>
      <!-- 会员管理 -->
      <div v-if="activeIndex === 0" class="area vip-management">
        <div v-if="!is_pay">
          <div class="prompt">
            <div class="level">我当前的会员等级：{{ userInfo.title }}</div>
            <div class="expire">
              会员到期时间：{{ userInfo.vip_grade_time || "--" }}
            </div>
          </div>
          <div class="title">
            <div class="text">我的权益</div>
            <div class="divide" />
          </div>
          <div class="benefits">
            <div class="item" v-for="(item, index) in benefits" :key="index">
              <div class="name">{{ item.name }}</div>
              <div class="times">
                {{ item.count }}/{{ item.total_count }}
                <Tooltip
                  effect="light"
                  :content="`代表你本月还有${item.total_count}次可使用`"
                  placement="right"
                >
                  <img
                    class="question-mark"
                    src="~/assets/images/question-mark.png"
                    alt=""
                  />
                </Tooltip>
              </div>
              <div class="unit">{{ item.desc }}</div>
            </div>
          </div>
          <div class="title">
            <div class="text">推荐产品</div>
            <div class="divide" />
          </div>
          <div class="recommends">
            <div class="item" v-for="(item, index) in recommends" :key="index">
              <img
                v-if="item.equity_category_id"
                src="~/assets/images/popular-recommend.png"
                alt=""
                class="popular"
              />
              <div class="name">{{ item.title }}</div>
              <div class="plans">
                <radio-group v-model="item.selected">
                  <div class="plan" v-for="(plan, pi) in item.equity" :key="pi">
                    <Radio
                      :label="plan.equity_id"
                      :class="plan.recommended && 'with-icon'"
                      >{{ `￥${plan.price}` + "/" + plan.title }}</Radio
                    >
                  </div>
                </radio-group>
              </div>
              <div class="purchase-btns" v-if="index !== 0">
                <div class="online" @click="vipPay(item, 0)">线下购买</div>
                <div class="offline" @click="vipPay(item, 1)">线上购买</div>
              </div>
              <div class="features">
                <div class="features-title"><p class="text">功能</p></div>
                <p class="feature" v-html="item.content"></p>
              </div>
            </div>
          </div>
        </div>
        <div class="table-wrap" v-else>
          <div class="order-head">
            <div class="order-number">订单号：{{ orderData.order_sn }}</div>
            <div class="order-user">用户名:{{ orderData.account }}</div>
            <div>购买会员：{{ orderData.title }}</div>
            <div class="pay">支付价格：￥{{ orderData.price }}</div>
            <div>
              <div
                class="btnItem transition"
                type="primary"
                @click="showPayMethods = true"
              >
                立即支付
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 历史订单 -->
      <div v-if="activeIndex === 1" class="area history-order">
        <Table class="table-head">
          <table-column label="产品名称" align="center" width="220" />
          <table-column label="有效期" align="center" />
          <table-column label="支付金额" align="center" width="150" />
          <table-column label="订单状态" align="center" width="100" />
          <table-column label="操作" align="center" width="100" />
        </Table>
        <Table
          class="order-table"
          :data="orders"
          min-height="500"
          :border="true"
          :show-header="false"
        >
          <table-column
            prop="buy_type"
            label="产品名称"
            align="center"
            width="220"
          />
          <table-column label="有效期" align="center">
            <template v-slot="{ row }">
              {{ row.start_time }} 至 {{ row.end_time }}
            </template>
          </table-column>
          <table-column
            prop="price"
            label="支付金额"
            align="center"
            width="150"
          >
            <template v-slot="{ row }"> ￥{{ row.price }} </template>
          </table-column>
          <table-column
            prop="status"
            label="订单状态"
            align="center"
            width="100"
          >
            <template v-slot="{ row }">
              <div>{{ row.status | statusText }}</div>
              <div v-if="row.status !== '-1'">
                {{ row.online ? "线上" : "线下" }}
              </div>
            </template>
          </table-column>
          <table-column label="操作" align="center" width="100">
            <template v-slot="{ row }">
              <a
                href="javascript:;"
                v-if="row.status == '0'"
                @click="listToPay(row)"
                >去支付</a
              >
              <br />
              <a
                href="javascript:;"
                class="del-box"
                @click="handleOrderDelete(row.order_id)"
              >
                <img :src="require('@/assets/images/delete-btn.png')" />
                <span>删除</span>
              </a>
            </template>
          </table-column>
        </Table>
      </div>
    </div>
    <!-- 线下购买二维码框 -->
    <Dialog
      title="平台提示"
      :visible="showUnlineCode"
      width="500px"
      :before-close="() => (showUnlineCode = false)"
      close-on-click-modal
    >
      <p class="unline-code-text unline-code-title">
        请添加客服人员线下购买会员：
      </p>
      <p style="text-align:center">
        <img class="unline-code-img" :src="orderData.wxchant" />
      </p>
      <p class="unline-code-text unline-code-intro">找包装网客服</p>
    </Dialog>
    <!-- 线上购买微信/支付宝 -->
    <Dialog
      title="平台提示"
      :visible="showPayMethods"
      width="500px"
      :before-close="() => (showPayMethods = false)"
      :close-on-click-modal="false"
    >
      <p>请选择支付方式：</p>
      <p style="text-align:center">
        <img
          class="pay-code-img pay-code-img-left"
          :class="payMethods === 'alipay' ? 'pay-code-img-active' : ''"
          :src="require('@/assets/images/pay/alipay.d834fcda.png')"
          @click="payMethods = 'alipay'"
        />
        <img
          class="pay-code-img"
          :class="payMethods === 'weixin' ? 'pay-code-img-active' : ''"
          @click="payMethods = 'weixin'"
          :src="require('@/assets/images/pay/weixin.8f9c6e77.png')"
        />
      </p>
      <div slot="footer" class="dialog-footer">
        <Button
          :loading="isGetPayInfo"
          class="btnItem transition"
          @click="paySubmit"
          >确 定</Button
        >
      </div>
    </Dialog>
  </div>
</template>

<script>
import {
  Radio,
  RadioGroup,
  Tooltip,
  Table,
  TableColumn,
  Dialog,
  Button
} from "element-ui";
import {
  getVip,
  getMyVip,
  getVipOrder,
  getorderDelete,
  getuserEquitylst,
  buyVip,
  buySubmit
} from "@/request/api";

export default {
  name: "VipBenefits",
  components: {
    Radio,
    RadioGroup,
    Tooltip,
    Table,
    TableColumn,
    Dialog,
    Button
  },
  data() {
    return {
      activeIndex: 0, // 菜单
      userInfo: {}, // 会员信息
      benefits: [],
      recommends: [],
      orders: [],
      is_pay: false,
      orderData: {},
      showUnlineCode: false,
      showPayMethods: false,
      payMethods: "", // alipay 支付宝 weixin 微信
      isGetPayInfo: false
    };
  },
  filters: {
    statusText(status) {
      return {
        1: "已支付",
        0: "未支付",
        "-1": "已关闭"
      }[status];
    }
  },
  created() {
    this.getInfo();
    // this.getHistoryLog()
  },
  watch: {
    activeIndex: {
      handler(val) {
        if (val === 1 && this.orders.length === 0) {
          this.getHistoryLog();
        }
      }
    }
  },
  methods: {
    checkTab(index) {
      this.activeIndex = index;
    },
    async getInfo() {
      await getVip().then(res => {
        if (res.status === 200) {
          this.recommends = res.data;
        }else {
          this.$message.error(res.message)
        }
      });
      const r = await getMyVip();
      try {
        this.userInfo = r.data;
      } catch (err) {
        this.$message.error(err.message);
      }
      const res = await getuserEquitylst();
      try {
        this.benefits = res.data;
      } catch (err) {
        this.$message.error(err.message);
      }
    },
    // 获取历史订单
    getHistoryLog() {
      getVipOrder()
        .then(res => {
          if (res.status === 200) {
            this.orders = res.data;
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    // 删除历史订单
    handleOrderDelete(id) {
      let that = this;
      this.$messageBox
        .confirm("确定删除吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(async () => {
          getorderDelete(id).then(res => {
            if (res.status === 200) {
              that.$toast.show("删除成功", 1000, false);
              that.getHistoryLog();
            } else {
              that.$toast.show(res.message, 1000, false);
            }
          });
        });
    },
    // 去支付
    listToPay(row) {
      this.orderData = row;
      this.is_pay = true;
      this.activeIndex = 0;
      window.scrollTo(0, 0);
    },
    // 线下购买
    // buytype 传1 是线上购买 0 是线下购买
    async vipPay(row, buytype) {
      if (this.isSubmit) return this.$toast.show("正在购买中...", 1000, false);
      if (row.selected == undefined) {
        return this.$toast.show("请选择购买期限！", 1000, false);
      }
      const params = {
        buytype: String(buytype),
        equity_id: String(row.selected)
      };
      this.isSubmit = true;
      try {
        const res = await buyVip(params);
        this.orderData = res.data || {};
        if (buytype == 1) {
          this.listToPay(this.orderData);
        } else {
          this.showUnlineCode = true;
        }
      } finally {
        this.isSubmit = false;
      }
    },
    // 支付
    async paySubmit() {
      if (!this.payMethods) {
        return this.$message.error("请选择支付方式！");
      }
      this.isGetPayInfo = true;
      try {
        const res = await buySubmit({
          type: this.payMethods,
          order_id: this.orderData.order_id
        });
        const resData = res.data || {};
        const resResult = resData.result || {};
        if (this.payMethods === "alipay") {
          const a = document.createElement("a");
          a.target = "_blank";
          a.href = resResult.config;
          a.click();
        }
      } finally {
        this.isGetPayInfo = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
@import "~@/assets/style/cover.scss";
.order-head {
  line-height: 40px;
}
.unline-code-img {
  max-width: 300px;
  max-height: 300px;
  margin: 20px 0 5px;
}
.unline-code-intro {
  text-align: center;
  color: #999;
}
.del-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
}
.pay-code-img {
  width: 173px;
  margin-top: 20px;
  border: 1px solid #e7e7e7;
  cursor: pointer;
}
.pay-code-img-left {
  margin-right: 20px;
}
.pay-code-img-active {
  border: 1px solid #e38b2e;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.btnItem {
  display: flex;
  width: 187px;
  height: 45px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  color: #fff;
  background: #e38b2b;
  border-radius: 10px;
  margin-right: 22px;
  cursor: pointer;
}

.btnItem:hover {
  opacity: 0.8;
}
.vip-benefits {
  .order-time {
    color: #999;
  }

  .head {
    height: 60px;
    background-color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #666;

    img {
      margin-right: 6px;
      margin-top: 3px;
    }
  }

  .content {
    background-color: #fff;
    padding: 15px 20px;
    color: #666;

    .tab-head {
      height: 50px;
      display: flex;
      align-items: center;
      color: #666;
      font-size: 16px;
      border-bottom: 1px solid #eee;

      .tab {
        padding: 0 15px;
        line-height: 50px;
        margin-right: 15px;
        border-bottom: solid 3px rgba(255, 255, 255, 0);
        cursor: pointer;
      }

      .tab-active {
        color: $theme-color-1;
        border-bottom: solid 3px $theme-color-1;
        box-sizing: border-box;
      }
    }

    .area {
      margin-top: 20px;
      margin-bottom: 20px;

      &.vip-management {
        .prompt {
          font-size: 15px;
          line-height: 32px;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          .expire {
            margin-left: 10px;
          }
        }

        .title {
          display: flex;
          align-items: center;
          margin-bottom: 40px;

          .text {
            width: 80px;
            font-weight: bold;
            font-size: 18px;
          }

          .divide {
            width: calc(100% - 100px);
            height: 0;
            border-bottom: solid 1px #f0f0f0;
          }
        }

        .benefits {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-bottom: 40px;

          .item {
            width: 23%;
            height: 130px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #4d4d4d;
            background: url("~@/assets/images/bg-1.jpg");
            background-size: 100% 100%;
            padding-bottom: 20px;

            .name {
              font-size: 15px;
              margin-bottom: 10px;
            }

            .times {
              font-weight: bold;
              font-size: 20px;
              position: relative;

              .question-mark {
                position: absolute;
                right: -22px;
                top: 5.5px;
              }
            }

            .unit {
              font-weight: bold;
              font-size: 20px;
            }
          }

          .item:nth-of-type(2) {
            background-image: url("~@/assets/images/bg-2.jpg");
          }

          .item:nth-of-type(3) {
            background-image: url("~@/assets/images/bg-3.jpg");
          }

          .item:nth-of-type(4) {
            background-image: url("~@/assets/images/bg-4.jpg");
          }
        }

        .recommends {
          display: flex;
          justify-content: space-around;
          padding: 0 60px;
          margin-bottom: 200px;

          .item {
            width: 300px;
            margin: 0 auto;
            min-height: 600px;
            border-radius: 10px;
            position: relative;
            background: url("~@/assets/images/bg-recommend1.png") no-repeat;
            background-size: 100% 100%;
            padding: 20px 15px;
            // margin: 0 20px;
            // border: 1px solid #d5d5d5;
            display: flex;
            flex-direction: column;
            align-items: center;

            .popular {
              position: absolute;
              right: 0;
              top: 0;
            }

            .name {
              font-size: 28px;
              color: #fff;
              margin-bottom: 40px;
              font-weight: bold;
            }

            .plans {
              font-size: 20px;
              color: #fff;
              margin-bottom: 15px;
              display: flex;
              flex-direction: column;

              .plan {
                /deep/ .el-radio {
                  display: flex;
                  align-items: center;
                  margin-bottom: 30px;
                }

                /deep/ .el-radio__label {
                  font-size: 20px;
                  color: #fff;
                }

                // 带有“推荐”icon的radio
                .with-icon {
                  /deep/ .el-radio__label:after {
                    content: url("~@/assets/images/recommend-float.png");
                    display: inline-block;
                    position: absolute;
                    bottom: 17px;
                  }
                }
              }
            }

            .purchase-btns {
              width: 100%;
              height: 45px;
              display: flex;
              justify-content: space-around;
              margin-bottom: 25px;

              .online,
              .offline {
                width: 85px;
                height: 45px;
                border-radius: 10px;
                color: #fff;
                font-size: 18px;
                font-weight: bold;
                display: flex;
                justify-content: center;
                align-items: center;

                &:hover {
                  cursor: pointer;
                }
              }

              .online {
                background-color: rgb(133, 187, 245);
              }

              .offline {
                background-color: rgb(188, 201, 113);
                // margin-left: 10px;
              }
            }

            .features {
              font-size: 16px;
              color: #fff;
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-bottom: 30px;

              .features-title {
                width: 100%;
                margin-bottom: 15px;

                .text {
                  font-weight: bold;
                  display: flex;
                  align-items: center;

                  &:before,
                  &:after {
                    content: "";
                    display: inline-block;
                    width: 80px;
                    height: 0;
                    border-bottom: solid 1px rgba(226, 226, 226, 0.3);
                  }
                }
              }

              .feature {
                margin-bottom: 10px;
              }
            }
          }

          .item:nth-of-type(2) {
            background-image: url("~@/assets/images/bg-recommend2.png");
          }
        }
      }

      &.history-order {
        .table-head {
          background-color: #f3f4f7;
          margin-bottom: 40px;

          /deep/ .el-table__body-wrapper {
            height: 0;
          }

          /deep/ th {
            color: #666;
            background-color: #f3f4f7;
          }
        }

        .table-wrap {
          margin-bottom: 40px;
        }

        /deep/ .el-table__body {
          td {
            padding: 30px 0;
          }
        }

        .order-head {
          height: 40px;
          background-color: #f3f4f7;
          color: #666;
          padding: 0 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
